<!--
 * @Date: 2023-02-09 16:55:59
 * @LastEditTime: 2023-02-21 18:31:20
 * @FilePath: /hash-guess-game/src/views/ClubInventory/ClubInventory.vue
 * 介绍:俱乐部清单
-->
<script lang="ts" setup>
import CardGlass from "@@/components/CardGlass/CardGlass.vue";
import dayjs from "dayjs";
import { omitText } from "@@/utils/tools/project";
import { formatNumber, _require } from "@@/utils/tools/tools";
import {
  apiClubInventory,
  ClubInventory,
} from "@@/api/module/clubInventory";
</script>

<template>
  <div class="meGameList">
    <h4>{{ $t("ju-le-bu-qin-dan") }}</h4>
    <CardGlass>
      <PagingList :api="apiClubInventory" sticky="sticky">
        <template #header>
          <div class="list_title list-layout">
            <h4>{{ $t("can-sai-shi-jian") }}</h4>
            <h4>{{ $t("ha-xi") }}</h4>
            <h4>{{ $t("jiang-li") }}</h4>
          </div>
        </template>
        <template #item="{ item }: { item: ClubInventory.ResItem }">
          <div class="auto-mt">
            <div class="List_item list-layout">
              <div class="T-S-sm">
                {{ dayjs(item.created_at).format("MM-DD HH:mm") }}
              </div>
              <CopyText :copy-text="item.txid" class="T-S-sm">
                {{ omitText(item.txid) }}
              </CopyText>
              <div class="list_item_number T-S-sm">
                {{ formatNumber(item.money, 4) }}
              </div>
            </div>
          </div>
        </template>
      </PagingList>
    </CardGlass>
  </div>
</template>

<style lang="less" scoped>
h4 {
  text-align: center;
}
.CardGlass {
  margin-top: var(--gap-md);
}

.List_item {
  padding: var(--gap-md) 0;
  border-bottom: 2rem solid var(--C-T1);
  .list_item_number{
    background-color: var(--C-M1);
    padding: 0 0.5em;
    border-radius: 0.3em;
  }
}
</style>
